<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>腾飞健康管理平台</title>
    <link rel="stylesheet" href="lib/layui/css/layui.css">
</head>
<body style="padding: 10px">
<form class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">项目名称</label>
        <div class="layui-input-block">
            <input type="text" name="examineName" lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
<!--    <div class="layui-form-item">-->
<!--        <label class="layui-form-label">类别</label>-->
<!--        <div class="layui-input-inline">-->
<!--            <select name="typeLevel1" lay-filter="typeLevel1" lay-verify="required">-->
<!--                <option value="">请选择</option>-->
<!--            </select>-->
<!--        </div>-->
<!--        <div class="layui-input-inline" style="display: none" id="level2">-->
<!--            <select name="typeLevel2" lay-filter="typeLevel2">-->
<!--                <option value="">请选择</option>-->
<!--            </select>-->
<!--        </div>-->
<!--        <div class="layui-input-inline" style="display: none" id="level3">-->
<!--            <select name="typeLevel3" lay-filter="typeLevel3">-->
<!--                <option value="">请选择</option>-->
<!--            </select>-->
<!--        </div>-->
<!--        <div class="layui-input-inline" style="display: none" id="level4">-->
<!--            <select name="typeLevel4" lay-filter="typeLevel4">-->
<!--                <option value="">请选择</option>-->
<!--            </select>-->
<!--        </div>-->
<!--    </div>-->
    <input type="hidden" name="typeLevel1">
    <div class="layui-form-item">
        <label class="layui-form-label">适用性别</label>
        <div class="layui-input-block">
            <select name="applySex" lay-verify="required">
                <option value="">请选择</option>
                <option value="不限性别">不限性别</option>
                <option value="男性">男性</option>
                <option value="女性">女性</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">适用范围</label>
        <div class="layui-input-block">
            <select name="applyRange" lay-verify="required">
                <option value="">请选择</option>
                <option value="不限群体">不限群体</option>
                <option value="婴幼儿">婴幼儿</option>
                <option value="青少年">青少年</option>
                <option value="中年">中年</option>
                <option value="老年">老年</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">价格</label>
        <div class="layui-input-block">
            <input type="text" name="price" autocomplete="off" placeholder="￥" class="layui-input"
                   lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="submitItem">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script type="text/javascript" src="lib/layui/layui.js"></script>
<script>
    layui.use(["form", "jquery", "layer"], function () {
        let form = layui.form;
        let layer = layui.layer;
        let $ = layui.jquery;

        //给后台提交数据一个新项目体检项目的全部数据
        form.on("submit(submitItem)", function (data) {
            console.log(data.field);
            let loadIndex = "";
            $.ajax({
                url: "/executeAddExamineItem",
                type: "post",
                dataType: "json",
                data: data.field,
                async: true,
                beforeSend: function () {
                    loadIndex = layer.load();
                },
                success: function (responseResult) {
                    layer.close(loadIndex);
                    if (responseResult.data == 1) {
                        layer.msg(responseResult.msg, {icon: 1, time: 1000});
                    } else {
                        layer.msg(responseResult.msg, {icon: 7, time: 1000});
                    }
                },
                error: function () {
                    layer.close(loadIndex);
                    console.log("服务器错误");
                    layer.msg("服务器错误！", {icon: 7, time: 1000});
                }
            })
            return false;
        });

        //项目类别下拉框修饰
        //1:第一个下拉框的信息(项目所属科室）在页面加载时就直接加载
        var getTypeLevel1List = function () {
            $.ajax({
                url: "/getTypeLevel1List",
                type: "post",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                async: true,
                success: function (responseData) {
                    console.log(responseData);
                    for (let i = 0; i < responseData.length; i++) {
                        if(responseData[i].typeName=="实验室检查"){
                            $("input[name=typeLevel1]").val(responseData[i].itemTypeId);
                        }
                        //$("select[name=typeLevel1]").append("<option value=" + responseData[i].itemTypeId + ">" + responseData[i].typeName + "</option>")
                    }
                    form.render("select");
                },
                error: function () {
                    console.log("第一个下拉框的信息(项目所属科室）请求失败。");
                }
            });
        }
        $(document).ready(getTypeLevel1List());

        //2：第二个下拉框---根据第一个下拉框选择的值，在第一个下拉框的回调函数中完成第二个下拉框的渲染
        form.on("select(typeLevel1)", function (data) {
            if (data.value != "") {
                $.ajax({
                    url: "/getTypeLevel2List",
                    type: "get",
                    data: "itemTypeId=" + data.value,
                    dataType: "json",
                    async: true,
                    contentType: "application/json; charset=utf-8",
                    success: function (responseData) {
                        if (responseData == null || responseData.length == 0) {
                            $("#level2").css("display", "none");
                        } else {
                            $("#level2").css("display", "block");
                            $("select[name=typeLevel2]").html("").append("<option value=''>请选择</option>");
                            for (let i = 0; i < responseData.length; i++) {
                                $("select[name=typeLevel2]").append("<option value=" + responseData[i].itemTypeId + ">" + responseData[i].typeName + "</option>");
                            }
                        }
                        if ($("#level2").css("display") === "block") {
                            $("select[name=typeLevel2]").attr("lay-verify", "required");
                        } else {
                            $("select[name=typeLevel2]").removeAttr("lay-verify");
                        }
                        form.render("select");
                    },
                    error: function () {
                        console.log("体检项目类型二级下拉框数据请求失败！");
                    }
                })
            } else {
                $("#level2").css("display", "none");
            }
            $("#level3").css("display", "none");
            $("#level4").css("display", "none");
        });

        //3：第三个下拉框---根据第二个下拉框选择的值，在第二个下拉框的回调函数中完成第三个下拉框的渲染
        form.on("select(typeLevel2)", function (data) {
            if (data.value != "") {
                $.ajax({
                    url: "/getTypeLevel3List",
                    type: "get",
                    dataType: "json",
                    data: "itemTypeId=" + data.value,
                    async: true,
                    contentType: "application/json; charset=utf-8",
                    success: function (responseData) {
                        if (responseData == null || responseData.length == 0) {
                            $("#level3").css("display", "none");
                            $("select[name=typeLevel3]").removeAttr("lay-verify");
                        } else {
                            $("#level3").css("display", "block");
                            $("select[name=typeLevel3]").attr("lay-verify", "required");
                            $("select[name=typeLevel3]").html("").append("<option value=''>请选择</option>");
                            for (let i = 0; i < responseData.length; i++) {
                                $("select[name=typeLevel3]").append("<option value=" + responseData[i].itemTypeId + ">" + responseData[i].typeName + "</option>");
                            }
                            form.render("select");
                        }
                    },
                    error: function () {
                        console.log("体检项目类型三级下拉框数据请求失败！");
                    }
                });
            } else {
                $("#level3").css("display", "none");
            }
            $("#level4").css("display", "none");
        })

        //4：第四个下拉框---根据第三个下拉框选择的值，在第三个下拉框的回调函数中完成第四个下拉框的渲染
        form.on("select(typeLevel3)", function (data) {
            if (data.value != "") {
                $.ajax({
                    url: "/getTypeLevel4List",
                    type: "get",
                    dataType: "json",
                    data: "itemTypeId=" + data.value,
                    async: true,
                    contentType: "application/json; charset=utf-8",
                    success: function (responseData) {
                        if (responseData == null || responseData.length == 0) {
                            $("#level4").css("display", "none");
                            $("select[name=typeLevel4]").removeAttr("lay-verify");
                        } else {
                            $("#level4").css("display", "block");
                            $("select[name=typeLevel4]").attr("lay-verify", "required");
                            $("select[name=typeLevel4]").html("").append("<option value=''>请选择</option>");
                            for (let i = 0; i < responseData.length; i++) {
                                $("select[name=typeLevel4]").append("<option value=" + responseData[i].itemTypeId + ">" + responseData[i].typeName + "</option>");
                            }
                            form.render("select");
                        }
                    },
                    error: function () {
                        console.log("体检项目类型四级下拉框数据请求失败！");
                    }
                });
            } else {
                $("#level4").css("display", "none");
            }
        })

        // //计量单位下拉框渲染
        // let getItemUnitsList = function () {
        //     $.ajax({
        //         url: "/getItemUnitsList",
        //         type: "get",
        //         dataType: "json",
        //         async: true,
        //         contentType: "application/json; charset=utf-8",
        //         success: function (responseData) {
        //             console.log(responseData);
        //             for (let i = 0; i < responseData.length; i++) {
        //                 $("select[name=unitsId]").append("<option value=" + responseData[i].itemUnitsId + ">" + responseData[i].unitsName + "</option>");
        //             }
        //             form.render("select");
        //         },
        //         error: function () {
        //             console.log("计量单位下拉框数据请求失败。");
        //         }
        //     });
        // }
        // $(document).ready(getItemUnitsList());

    });
</script>
</body>
</html>